<template>
  <div class="info" v-if="info">
    <div class="head">
      <div class="title">{{ info.questionnaireTitle }}</div>
      <div class="info_type">调查问卷</div>
      <div class="line"></div>
    </div>

    <div class="questionnaire_list">
      <div
        :class="['list_item', item.error ? 'error' : '']"
        :id="`item_${index}`"
        v-for="(item, index) in info?.questionList"
      >
        <div class="item_title">
          <span
            v-if="item.isRequired == 1"
            class="is_required"
            style="color: red"
          >
            *
          </span>
          <span>{{ index + 1 }}.{{ item.questionTitle }}</span>
        </div>
        <div v-if="item.questionType == 1">
          <van-radio-group
            :model-value="item.optionId"
            :disabled="true"
            shape="dot"
          >
            <van-radio
              :name="index"
              v-for="(itg, index) in item.questionOptionList"
            >
              {{ itg.optionContent }}
            </van-radio>
          </van-radio-group>
        </div>
        <div v-if="item.questionType == 2">
          <van-checkbox-group
            :model-value="item.optionId"
            :disabled="true"
            shape="square"
          >
            <van-checkbox
              :name="index"
              v-for="(itg, index) in item.questionOptionList"
            >
              {{ itg.optionContent }}
            </van-checkbox>
          </van-checkbox-group>
        </div>
        <div v-if="item.questionType == 3">
          <van-field
            v-model="item.optionIsText"
            placeholder="请填写"
            :disabled="true"
            maxlength="50"
          />
        </div>
        <div v-if="item.questionType == 4">
          <van-field
            :model-value="item.optionIsText"
            maxlength="50"
            :disabled="true"
            placeholder="请选择时间"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { queryQuestionnaireSubmissionRecordDetails } from "@/api/index";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
let info = ref();
let router = useRouter();
let route = useRoute();
let id = route.params.id;
function getInfo() {
  queryQuestionnaireSubmissionRecordDetails(id).then((res) => {
    res.data.questionList.forEach((item, index) => {
      item.optionId = null;
      if (item.questionType == 1) {
        item.questionOptionList.forEach((itg, i) => {
          if (itg.isCheck == 1) {
            item.optionId = i;
          }
        });
      }
      if (item.questionType == 2) {
        item.optionId = [];
        item.questionOptionList.forEach((itg, i) => {
          if (itg.isCheck == 1) {
            item.optionId.push(i);
          }
        });
      }
    });
    info.value = res.data;
    console.log(res.data,'--');
  });
}
getInfo();
</script>

<style scoped lang="scss">
.info {
  padding: 16px 0 100px 0;
}

.title {
  font-weight: bold;
  color: #333;
  font-size: 20px;
  padding: 5px;
  text-align: center;
  color: #1e80ff;
}

.info_type {
  font-size: 15px;
  color: #666;
}

.line {
  border-bottom: 1px dashed #ccc;
  margin: 14px 0;
}

.head {
  padding: 0 10px;
}

.list_item {
  border: 1px dashed transparent;
  margin-bottom: 10px;
  padding: 10px;
  &.error {
    border: 1px dashed red;
  }
  .is_required {
    transform: translateY(3px);
    margin-right: 4px;
    display: inline-block;
  }

  .item_title {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
</style>
